<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('自定义填写规范')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <div >
            <div style="display: inline-block;width: 50%;" id="div">
            <h3>自定义填写规范</h3>
            <div class="operation">
                <div>
                    <span><h4>字段名称</h4></span>
                    <span><h4>绑定指标</h4></span>
                    <span><h4>输入类型</h4></span>
                </div>

            </div>
            <div  class="operation">
                <div th:each="list,indexs : ${formList}" th:id="list+${indexs.index}">
                    <span >
                        <span class="glyphicon glyphicon-plus" ></span>
                        <input class="form-control" th:onchange="'modify('+${indexs.index}+')'" type="text" th:id="name+${indexs.index}" th:value="${list.name}" />
                    </span>
                   </span>
                    <span style="display:inline-block; ">
                         <select class="form-control m-b" th:onchange="'modify('+${indexs.index}+')'" th:id="binding+${indexs.index}"  th:value="${list.binding}">
                            <option></option>
                        </select>
                    </span>
                    <span style="display:inline-block; width: 250px " th:id="optionClass+${indexs.index}">
                        <select class="form-control m-b" th:onchange="'modify('+${indexs.index}+')'" th:id="inputType+${indexs.index}"  th:value="${list.inputType}">
                            <option th:value="文本输入框">文本输入框(默认)</option>
                            <option th:value="数字输入框">数字输入框</option>
                            <option th:value="下拉框">下拉框</option>
                            <option th:value="日期">日期</option>
                            <option th:value="月份">月份</option>
                            <option th:value="年份">年份</option>
                        </select>
                        <span class="glyphicon glyphicon-plus" style="display: inline;"></span>
                    </span>

                </div>
            </div>
            </div>
            <div style="display: inline-block;width: 45%; " >
                <h3>预览窗格</h3>
                <div style="height: 100%">
                    <iframe id="excelIframe" src='/demo/table/filling' width='100%'>
                    </iframe>
                </div>
            </div>
        </div>
        <div  class="col-lg-12 col-sm-12 col-md-12"><button type="button" class="btn btn-w-m btn-success" onclick="submitHandler()">提交</button></div>

    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <script th:inline="javascript">
        var prefix = ctx + "gs/task"
        $("#form-task-add").validate({
            focusCleanup: true
        });
        var formList = [[${formList}]];
        $(function(){
            setTimeout(function(){

                console.info($("#div").height())
                var excelHeight=$("#div").height()
                $("#excelIframe").css({"height": excelHeight})
            },1000);


        });

        function submitHandler() {
            // let url = ctx + "gs/task";
            // $.modal.openFull("导入报表模板", url);
            $.modal.parentTab("任务发布", prefix+"/task");
            console.info( $("#inputType0").val())
            // if ($.validate.form()) {
            //     $.operate.save(prefix + "/add", $('#form-task-add').serialize());
            // }
        }
        //修改字段值
        function modify(index){
            console.info(index)
            var name="#name"+index;
            var inputType="#inputType"+index;
            var binding="#binding"+index;
            formList[index].name=$(name).val()
            formList[index].binding=$(binding).val()
            formList[index].inputType=$(inputType).val()
            console.info(formList)
            if ($(inputType).val()=="下拉框"){
                var optionClass="#optionClass"+index
                var optionValue="optionValue"+index
                $(optionClass).append("<span id='"+optionValue+"' style='display: inline;color:#1c84c6 '>设置选项</span>")
            }else{
                formList[index].opiton=null
            }
        }

        $("input[name='taskStartTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='taskEndTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>

    <style>
        .operation>div>span{
            width: 180px;
            margin:0px 2px;
            display:inline-block;
        }
        .operation select,.operation input{
            width: 160px;
            /*padding: 5px;*/
            margin-top: 4px;
            display: inline-block;
        }
    </style>
</body>
</html>